<template>
  <div>
    <Nav></Nav>
    <div class="container layout layout-margin-top">
      <div class="row">
        <!-- 路径列表 -->
        <div class="col-md-9 layout-body">
          <div class="content">
            <div class="row">
              <myPath
                v-for='path in paths'
                :key='path.id'
                :path='path'
                class="col-sm-6"
              ></myPath>
            </div>
          </div>
        </div>
        <!-- 侧边栏 -->
        <div class="col-md-3 layout-side">
          <!-- 登录注册 -->
          <div class="panel panel-default panel-userinfo">
            <div class="panel-body body-userinfo">
              <div class="media userinfo-header">
                <div class="media-left">
                  <div class="user-avatar">

                    <a
                      class="avatar"
                      href="#sign-modal"
                      data-toggle="modal"
                      data-sign="signin"
                    >
                      <img
                        class="circle"
                        src="@/assets/img/logo-grey.png"
                      >
                    </a>

                  </div>
                </div>
                <div class="media-body">

                  <span class="media-heading username">欢迎来到实验楼</span>
                  <p class="vip-remain">做实验，学编程</p>

                </div>
              </div>

              <div class="row userinfo-data">

                <hr>
                <div class="btn-group-lr">
                  <a
                    href="#sign-modal"
                    type="button"
                    class="btn btn-success col-md-5 col-xs-6 login-btn"
                    data-toggle="modal"
                    data-sign="signin"
                  >登录</a>
                  <a
                    href="#sign-modal"
                    type="button"
                    class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn"
                    data-toggle="modal"
                    data-sign="signup"
                  >注册</a>
                </div>

              </div>

              <div class="userinfo-footer row">
                <div class="col-md-6 col-xs-6 pos-left">

                  <a
                    href="#sign-modal"
                    data-toggle="modal"
                    data-sign="signin"
                  ><span class="glyphicon glyphicon-bookmark"></span> 加入私有课</a>

                </div>
                <div class="col-md-6 col-xs-6 pos-right">
                  <a
                    href="/contribute"
                    target="_blank"
                  ><span class="glyphicon glyphicon-send"></span> 我要投稿</a>
                </div>

                <div
                  id="join-private-course"
                  class="modal fade words-ctrl"
                  tabindex="-1"
                  role="dialog"
                >
                  <div
                    class="modal-dialog"
                    role="document"
                  >
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title">加入私有课</h4>
                      </div>
                      <div class="modal-body">
                        <div style="margin:15px 0; font:16px;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
                        <form
                          id="private-course-form"
                          method="POST"
                          action="/courses/join"
                        >
                          <div class="form-group">
                            <label for="code">邀请码</label>
                            <input
                              class="form-control"
                              id="code"
                              name="code"
                              type="text"
                              value=""
                            >
                            <input
                              name="_csrf_token"
                              type=hidden
                              value="1483786710##0229e038fd44e98fbb3031ffe65d41ef52368b10"
                            >
                          </div>
                        </form>

                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-default"
                          data-dismiss="modal"
                        >取消</button>
                        <button
                          type="button"
                          class="btn btn-primary"
                          onclick="document.getElementById('private-course-form').submit();"
                        >确定</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 最热路径 -->
          <div class="sidebox">

            <div class="sidebox-header">
              <h4 class="sidebox-title">最热路径</h4>
            </div>
            <div class="sidebox-body course-content side-list-body">
              <a href="/paths/python"><img
                  style="width:25px;height:25px"
                  src="@/assets/img/1471513769430.png"
                > Python 研发工程师</a>
              <a href="/paths/bigdata"><img
                  style="width:25px;height:25px"
                  src="@/assets/img/1471513926288.png"
                > 大数据工程师</a>
              <a href="/paths/cpp"><img
                  style="width:25px;height:25px"
                  src="@/assets/img/1471513793360.png"
                > C++ 研发工程师</a>
              <a href="/paths/security"><img
                  style="width:25px;height:25px"
                  src="@/assets/img/1471513867033.png"
                > 信息安全工程师</a>
              <a href="/paths/linuxsys"><img
                  style="width:25px;height:25px"
                  src="@/assets/img/1471514004752.png"
                > Linux 运维工程师</a>
            </div>

          </div>

          <!-- 二维码 -->
          <div class="side-image side-qrcode">
            <img src="@/assets/img/ShiyanlouQRCode.png">
            <div class="side-image-text">关注公众号，手机看教程</div>
          </div>

        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Nav from '@/components/Nav'
import Footer from '@/components/Footer'
import myPath from '@/components/Path'
export default {
  components: {
    Nav,
    Footer,
    myPath
  },
  data() {
    return {
      paths: [
        {
          id: 1,
          title: '新手入门', // 路径名称
          courseTotal: 6, // 路径课程数
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/1471513730333.png' // 路径图片
        },
        {
          id: 2,
          title: 'Python研发工程师', // 路径名称
          courseTotal: 83, // 路径课程数
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/1471513769430.png' // 路径图片
        },
        {
          id: 3,
          title: 'C++ 研发工程师', // 路径名称
          courseTotal: 26, // 路径课程数
          img: 'http://iopsyche.gitee.io/static/syl/assets/img/1471513793360.png' // 路径图片
        }
      ]
    }
  }
}
</script>
<style>
.container {
  text-align: left;
}
</style>
